<template>
	<view class="content">
		<view class="">
			<c-navBar title="教务数据"></c-navBar>

			<heardSeach @emitParmas="seach">
				<template #select>
					<uni-data-select :clear="false" v-model="pramas.type" :localdata="actions" @change="onSelect"></uni-data-select>
					<!-- <van-popover v-model:show="showPopover" :actions="actions" @select="onSelect">
						<template #reference>
							<view class="type-item">
								<text>{{actionName}}</text>
								<van-icon name="arrow-down" class="type-item-icon" />
							</view>
						</template>
					</van-popover> -->
				</template>

			</heardSeach>
		</view>
		<view class="content-bottom">
			<c-list class="ranking-list" v-model:loading="loading" v-model:error="error" error-text="请求失败，点击重新加载"
				@load="Loads">
				<van-empty description="暂无数据" v-if="list.length===0" />
				<view class="ranking-item" v-for="(item,index) in list" :key="index">
					<view class="ranking-item-top">
						<view class="type-color " :class="'type-color1-'+item.type">
							<text>{{getreadType(item.type)}}</text>
						</view>
						<text class="type-color-title1">{{item.user.username}}</text>
						<text class="type-color-title2">【{{item.test_date}}】</text>
					</view>
					<view class="ranking-item-bottom">
						<text class="ranking-item-bottom-title">
							内容
						</text>
						<view class="ranking-item-bottom-remask">
							{{item.content}}
						</view>
					</view>
					<view class="fraction">
						<text class="fraction-text"
							:class="{'fraction-text-min':item.score>95}">{{Number(item.score)}}</text>

					</view>
				</view>

			</c-list>
		</view>






	</view>
</template>

<script setup>
	import heardSeach from "../../components/heardSeach/index.vue"
	import {
		getEducationalList
	} from "@/apis/dataList.js"
	import {
		getTimeDate
	} from "../../utils/index.js"
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app"
	import {
		ref,
		reactive
	} from "vue"
	const pramas = reactive({
		start_date: '',
		end_date: '',
		search_data: '',
		type: 1,
		// page: 1,
		// size: 10,
	})

	const showPopover = ref(false);
	const listLoading = ref(false)
	const list = ref([]);
	const error = ref(false);
	const loading = ref(false);
	const total = ref(0)
	const actionName = ref('入门测')

	const actions = [{
			value: 1,
			id: 1,
			text: '入门测'
		},
		{
			value: 2,
			id: 2,
			text: '出门测'
		},
		{
			value: 3,
			id: 3,
			text: '阶段测'
		},
		{
			value: 4,
			id: 4,
			text: '模块测'
		},
	];
	const getreadType = (e) => {
		switch (e) {
			case 1:
				return '入门测';
				break;
			case 2:
				return '出门测';
				break;
			case 3:
				return '阶段测';
				break;
			case 4:
				return '模块测';
				break;


		}
	}
	onLoad(() => {
		// getTimeDate()
		let time = getTimeDate()
		pramas.start_date = `${time.year}/${time.month}/${time.day}`
		pramas.end_date = `${time.year}/${time.month}/${time.day}`
		init()
	})

	const seach = (data) => {
		pramas.start_date = data.start_date
		pramas.end_date = data.end_date
		pramas.search_data = data.value


		init()

	}
	const onSelect = (action) => {
		// console.log(action)
		// actionName.value = action.text
		// pramas.type = action.id


		init()
	}
	const init = async (type) => {
		try {
			if (listLoading.value) {
				return
			}
			listLoading.value = true;
			if (type) {
				pramas.page = pramas.page + 1
			}
			let {
				data
			} = await getEducationalList(pramas)

			if (data) {
				// total.value = data.total

				list.value = data
			}
			listLoading.value = false;

			console.log(list.value)
		} catch (err) {
			listLoading.value = false;
			console.log(err)
		}



	}
	const Loads = () => {


		// init(1)
		loading.value = false;
		error.value = false;


	};
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		height: 100vh;
	}

	.heard {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100vw;
		height: auto;
		background: rgba(255, 255, 255, 1);
		padding-bottom: 28rpx;
		padding-top: 10rpx;
	}


	.seach-box {
		display: flex;
		width: 674.65rpx;
		margin-top: 18rpx;
	}

	.type-item {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 192.76rpx;
		height: 66.59rpx;
		opacity: 1;
		border-radius: 10.51rpx;
		background: rgba(255, 255, 255, 1);
		border: 1.75rpx solid rgba(252, 247, 247, 1);
		margin-right: 16rpx;

		text {
			font-size: 21.03rpx;
			font-weight: 400;
			letter-spacing: 0px;
			line-height: 30.46rpx;
			color: rgba(102, 102, 102, 1);
			margin-right: 28rpx;

		}

		.type-item-icon {
			font-size: 24rpx;
			color: rgba(102, 102, 102, 1);
		}


	}

	.value-item {
		width: 345.21rpx;
		height: 66.59rpx;
		opacity: 1;
		border-radius: 10.51rpx;
		background: rgba(255, 255, 255, 1);
		margin-left: 9rpx;
		border: 1.75rpx solid rgba(252, 247, 247, 1);

		.uni-input {
			height: 66.59rpx;
			width: 345.21rpx;
			padding: 0 23rpx;
		}
	}

	.seach-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 101.64rpx;
		height: 66.59rpx;
		opacity: 1;
		border-radius: 10.51rpx;
		background: rgba(166, 166, 166, 1);
		border: 1.75rpx solid rgba(252, 247, 247, 1);
		margin-left: 19rpx;

		text {
			font-size: 21.03rpx;
			line-height: 30.46rpx;
			color: rgba(51, 51, 51, 1);
		}

	}


	.content-bottom {

		width: 100%;
		flex: 1;

	}

	.ranking-item {
		display: flex;
		flex-direction: column;
		margin: 0 auto;
		position: relative;
		padding: 24rpx;
		width: 670rpx;
		min-height: 168rpx;
		border-radius: 18rpx;
		background: rgba(255, 255, 255, 1);
		border: 2rpx solid rgba(236, 236, 236, 1);
		margin-bottom: 32rpx;
	}

	.ranking-item-top {
		display: flex;
		align-items: center;
		width: 100%;

		.type-color-title1 {
			margin-left: 12rpx;
			font-size: 32rpx;
			line-height: 35.52rpx;
			color: rgba(42, 130, 228, 1);
		}

		.type-color-title2 {
			font-size: 32rpx;
			line-height: 35.52rpx;
			color: rgba(166, 166, 166, 1);
		}
	}

	.ranking-item-bottom {
		display: flex;
		align-items: center;
		width: calc(100% - 112rpx);
		margin-top: 36rpx;

		.ranking-item-bottom-title {
			font-size: 32rpx;
			line-height: 30.46rpx;
			color: rgba(51, 51, 51, 1);
			margin-right: 12rpx;

		}

		.ranking-item-bottom-remask {
			flex: 1;
			max-height: 90rpx;
			font-size: 32rpx;
			line-height: 30rpx;
			color: rgba(102, 102, 102, 1);

			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			/* 控制显示的行数 */
			overflow: hidden;
			text-overflow: ellipsis;
			/* 当文本溢出时显示省略号 */
		}
	}

	.fraction {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 32rpx;
		right: 21rpx;
		width: 120.39rpx;
		height: 120.39rpx;
		background: rgba(208, 226, 247, 1);
		border: 1.75rpx solid rgba(236, 236, 236, 1);
		border-radius: 50%;
	}

	.fraction-text {
		font-size: 63.08rpx;
		line-height: 91.35rpx;
		color: rgba(212, 48, 48, 1);

	}

	.fraction-text-min {
		color: rgba(255, 141, 26, 1);

	}

	.type-color {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 8rpx 12rpx;

		border-radius: 5.26rpx;
		font-size: 28rpx;
		line-height: 20.29rpx;
		color: rgba(255, 255, 255, 1);
	}

	.type-color-1 {
		background: rgba(42, 130, 228, 1);
	}

	.type-color-2 {
		background: rgba(255, 141, 26, 1);
	}

	.type-color-3 {
		background: rgba(0, 186, 173, 1);
	}

	.type-color-4 {
		background: rgba(255, 87, 51, 1);
	}

	.type-color1-1 {
		background: rgba(42, 130, 228, 1);
	}

	.type-color1-2 {
		background: rgba(255, 141, 26, 1);
	}

	.type-color1-3 {
		background: rgba(0, 186, 173, 1);
	}

	.type-color1-4 {
		background: rgba(255, 87, 51, 1);
	}

	.color2-style {
		color: rgba(255, 141, 26, 1);
	}
</style>